CodeSandboxでFirebase authendicationを使ってみる
使う題材
使うライブラリ
/emoji/react.icon
/icons2/Bulma.icon
2020-11-27 17:52:39
17:56:55 した
18:39:45 再開
18:40:35 Login pageを作る
19:03:05 再開
19:07:43 Login.tsxをコピペした
19:09:35 Logout.tsxをコピペした
19:13:28 App.tsx整理した
19:13:22 これAccount作成画面がないのか
作るか。
Login.tsxをコピペしてSignin.tsxを作った
19:23:27 Email loginを有効にしたらtestしてみる
19:28:31 account作成成功！
19:28:36 firebase authendication consoleからuser情報見れるな
mail address
uid
流石にパスワードは見れなかった
パスワード再設定メールを送信できるみたい
やってみよう
19:29:39 送った
19:29:41 きた
project nameの設定をしていないからか、app名が怪しいものになってる
19:30:42 再設定した
19:30:39 ちゃんと同じメールアドレスで複数のaccountを作れないようになっている
The email address is already in use by another account.ってでた
19:54:28 複数タブを開いていたときに、認証状態がきちんと同期されるかチェックする
ログイン状態は維持されるみたい
ログインした後、新しいタブで開いたら、既にログインされている状態だった
一方のタブでログアウトしたら、もう一方のタブも自動的にログアウトされた
きちんと同期されているようだ
19:56:12 複数のlog in optionを用意する場合は、FirebaseUIを使ったほうがよさそう 20:39:21 Log in/Log outのcustom hookを作る
これどういう意味があるんだろ？
やりたいことは、componentがmountされているかどうかを表すことなんだろうけど
必要かなそれ？
20:54:41 全部のfileからなくしてみる
なくしてみたらこういうerrorが出た
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
21:04:00 warningの原因
formの送信ボタンを押すことで、log in処理をする非同期関数onSubmitが呼ばれる
その中でlog in処理関数を呼ぶのだが、それが成功すると、即座にApp.tsxで監視している認証状態が変更され、renderingするcomponentが<Login />から<Logout />に切り変わる
すると、onSubmitの終了を待たずにLoginがunmountされてしまう
log in 処理関数を実行した後いくつかsetStateを呼び出すが、既にunmountされているcomponentの状態を更新することになってしまうため、このようなwarningが発生する
ここでのuseRef()の必要性がやっとわかった
これuseMountState()とかいうcustom hookにして外に出したほうがよさそうだな
21:46:14 作った
code:useMountState.ts
import * as React from 'react';
export const useMountState = () => {
const mounted = React.useRef(true);
// unmountされたことを検知する
React.useEffect(() => {
const cleanup = () => {
mounted.current = false;
};
return cleanup;
}, []);
return mounted.current;
};
うまく動いた。よさそう
解説見つけた
21:50:50 なんかLogin/Logoutのhook作らなくてもよさそうな気がした
何度も使うところじゃないし
だいぶFirebaseの認証方法に依存しちゃいそう
22:05:48 とりあえず大方のAPIの使い方は一通りわかったかな？
まあ記録はしたので大丈夫
次のステップ
適当にdataを作って、リストに表示できるようにする